<!-- 天地图快速入门 -->
<template>
  <div>
    <!-- 1、定义一个标签用于放置地图组件，指定高度和宽度，声明id -->
    <div style="" ref="map" id="mapDiv"></div>
  </div>
</template>
<!-- 
    2、在index.html中引入天地图API
       <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script> 
-->
<script setup>
import { onMounted, ref } from "vue";

// 当div在页面中加载完毕，在进行初始化地图、所以在onMounted中初始化地图操作，
onMounted(() => {
  // 2、创建地图实例、初始化地图对象
  const map = ref(
    new T.Map("mapDiv", {
      // projection: "EPSG:4326", // 。EPSG:900913：墨卡托投影、EPSG:4326：大地平面投影
      // minZoom: 10, // 地图允许展示的最小级别
      // maxZoom: 14, // 地图允许展示的最大级别。
      // zoom: 12, // 初始化地图展示级别
    })
  );

  // 3、设置地图级别 1：最大  18：最小
  const zomm = ref(12);

  // 4、配置经纬度坐标位置
  const lnglat = ref(new T.LngLat(116.40969, 39.89945));

  // 5、将坐标位置信息，传入centerAndZoom方法中，进行初始化地图
  map.value.centerAndZoom(lnglat.value, zomm.value);
});
</script>
<style>
#mapDiv {
  width: 800px;
  height: 500px;
  margin: 0 auto;
}
</style>
